<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>干预工坊 - AI情绪魔镜</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <div id="app">
    <header>
      <h1>干预工坊</h1>
    </header>
    <main class="page">
      <h2>干预方法</h2>

      <!-- 干预方法列表 -->
      <section class="card intervention-list">
          <div class="intervention-item">
              <h4><i class="fas fa-compass"></i> 情绪轮盘</h4>
              <p>通过工具探索和调节情绪。</p>
              <button onclick="alert('进入情绪轮盘')">进入</button>
          </div>
          <div class="intervention-item">
              <h4><i class="fas fa-gamepad"></i> CBT小游戏</h4>
              <p>通过认知行为疗法游戏改善情绪。</p>
               <button onclick="alert('开始CBT小游戏')">开始</button>
          </div>
           <div class="intervention-item">
              <h4><i class="fas fa-clipboard-check"></i> 任务挑战</h4>
              <p>完成任务，积极面对情绪。</p>
              <button onclick="alert('查看任务挑战')">查看</button>
          </div>
      </section>

       <!-- 可以添加其他干预类型 -->
       <section class="card">
           <h3>更多干预方式</h3>
           <p>探索更多个性化的情绪调节方法。</p>
           <button onclick="alert('探索更多干预方式')">探索</button>
       </section>

    </main>
    <footer>
      <nav>
        <button onclick="window.location.href='index.html'">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </button>
        <button onclick="window.location.href='recognition.html'">
          <i class="fas fa-brain"></i>
          <span>识别中心</span>
        </button>
        <button class="active" onclick="window.location.href='intervention.html'">
          <i class="fas fa-hand-holding-heart"></i>
          <span>干预工坊</span>
        </button>
        <button onclick="window.location.href='growth.html'">
          <i class="fas fa-chart-line"></i>
          <span>成长中心</span>
        </button>
        <button onclick="window.location.href='my.html'">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </button>
      </nav>
    </footer>
  </div>
  <script src="main.js"></script>
</body>
</html> 